<template>
  <Content title="返工执行">
    <view class="device-details">
      <view class="action-box">
        <u-search
          placeholder="请输入筛选条件"
          v-model="search.workOrder"
          :clearabled="true"
          :showAction="false"
          @change="getList(true)"
        ></u-search>
      </view>
      <view class="main-box">
        <template v-if="data && data.length > 0">
          <scroll-view
            class="home-list"
            scroll-y
            @scrolltolower="scrollBottom"
            :refresher-triggered="triggered"
            :refresher-threshold="100"
            @refresherrestore="onRestore"
            refresher-enabled
            @refresherrefresh="onRefresh"
            :ower-threshold="0"
          >
            <view class="info-box" v-for="item in data" :key="item.id">
              <view class="title" @click="toPath(item)">
                <text class="txt u-line-1">返工申请单号 </text>
                <view class="value">
                  <text>{{ item.applicationNumber }}</text>
                  <uni-icons type="right" size="14" color="#999" />
                </view>
              </view>
              <view class="text-box">
                <text class="label">工单号:</text>
                <text class="value">{{ item.workOrder }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品编号:</text>
                <text class="value">{{ item.productNumber }}</text>
              </view>
              <view class="text-box">
                <text class="label">设备编号:</text>
                <text class="value">{{ item.equipmentNumber }}</text>
              </view>
              <view class="text-box">
                <text class="label">产品名称:</text>
                <text class="value">{{ item.materialName }}</text>
              </view>
              <view class="text-box">
                <text class="label">发起人:</text>
                <text class="value">{{ item.initiator }}</text>
              </view>
              <view class="text-box">
                <text class="label">发起数量:</text>
                <text class="value">{{ item.initiationsNumber }}</text>
              </view>
              <view class="text-box">
                <text class="label">发起时间:</text>
                <text class="value">{{ item.reworkStartTime }}</text>
              </view>
            </view>
            <view class="loading animation-scale-up" v-if="loading"></view>
            <view class="scroll-no-data" v-if="noData">已拉到最底部</view>
          </scroll-view>
        </template>
        <template v-else>
          <view class="info-box">
            <Empty />
          </view>
        </template>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import Empty from "@/components/empty";
import { setPageData } from "@/store/user";
export default {
  components: {
    Content,
    Empty,
  },
  data() {
    return {
      data: [],
      search: {
        workOrder: "",
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      show: false,
      scroll: false,
      noData: false,
      triggered: false,
      isReady: true,
    };
  },
  onShow: function () {
    if (this.isReady) return;
    this.getList(true);
  },
  onReady: function () {
    this.isReady = false;
    this.getList(true);
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  methods: {
    toPath(item) {
      setPageData(item);
      uni.navigateTo({
        url: `/pages/staging/rework-execution/details?applicationNumber=${item.applicationNumber}`,
        animationType: "pop-in",
      });
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
    },
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      this.$emit("onRefresh");
      this.getList(true);
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 100);
    },
    scrollBottom(e) {
      const that = this;
      if (!that.noData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList();
      }
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch("get", "/dms/mobileEnd/getReworkList", obj).then(
        ({ data }) => {
          if (that.scroll) {
            if ((data?.records || []).length === 0) {
              that.noData = true;
            } else {
              that.data.push(...data?.records);
            }
          } else {
            that.data = data?.records || [];
          }
          that.$loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .action-box {
    width: 100%;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
  }
  .main-box {
    flex: 1;
    padding: 20rpx;
    overflow: auto;
    .info-box {
      // padding: 0;
      margin: 0 0 20rpx 0;
    }
  }
  .home-list {
    height: 100%;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }
  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
  .btn-box {
    display: flex;
    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
